# Image

## Import

```jsx
import { Image } from 'bumbag';
```

## Usage

```jsx-live
<Image src="/bean.jpg" alt="Bean" width="500px" />
```

`<Image>` is also responsive by default, however, if you want to fix the width, add the `isFixed` prop.

```jsx-live
<Image
  isFixed
  src="/bean.jpg"
  alt="Bean"
  width="500px"
/>
```

### Image fit

Setting a `fit` prop to `"contain"` means that the whole image will fit in the bounds and it will not lose its scale.

```jsx-live
<Image
  fit="contain"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>
```

Setting a `fit` prop to `"cover"` means that the image will fill the bounds and it will not lose its scale.

```jsx-live
<Image
  fit="cover"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>
```

#### Positioning

You can change the position of a fitted image with the `fitPosition` prop. This prop mimics the `object-position` CSS attribute.

```jsx-live
<Image
  fit="contain"
  fitPosition="top"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>
```

```jsx-live
<Image
  fit="cover"
  fitPosition="20px 10px"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>
```

## Accessibility

### Rules

- An image **must have an `alt` prop**. However, if it is a [decorative image](https://www.w3.org/WAI/tutorials/images/decorative/) and the image is not intended to be read by a screen reader, pass through `alt=""`.

#### References

- [WAI Aria Image Concepts](https://www.w3.org/WAI/tutorials/images/)

## Props

### Image Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">src</Code>** <Code fontSize="100" palette="primary">string</Code> <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">fit</Code>** <Code fontSize="100" palette="primary">&#34;contain&#34; | &#34;cover&#34;</Code> 

How the image fits its bounds

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">fitPosition</Code>** <Code fontSize="100" palette="primary">string</Code> 

Positioning of the fitted image. Value can be "top", "left", "center", "right", "bottom" or an "x y" coordinate

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isFixed</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Fix the width of the image. It will not be responsive.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

<Theme
  component={'Image'}
  width="300px"
  src="/bean.jpg"
  padding="major-1"
  overrides={[
    'Image.styles.base',
    { key: 'Image.styles.fixed', props: { isFixed: true } },
    { key: 'Image.styles.contain', props: { fit: 'contain', height: '300px' } },
    { key: 'Image.styles.cover', props: { fit: 'cover', height: '300px' } }
  ]}
/>
